import React, { Component } from "react";
import moment from "moment";
import {
  Table,
  Popconfirm,
  InputNumber,
  Button,
  Tag,
  Modal,
  Form,
  Input,
} from "antd";
import { http } from "../../api/index";
import { roleList } from "../../utils";
export default class HeatManage extends Component {
  state = {
    explist: [],
    flag: false,
    isModalVisible: false,
    dowmModalVisible: false,
    columns: [
      {
        title: "序号",
        key: "",
        dataIndex: "",
        render: (v, item, index) => {
          return index;
        },
        align: "center",
      },
      {
        title: "面经标题",
        dataIndex: "title",
        key: "title",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "作者",
        dataIndex: "username",
        key: "username",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      //   {
      //     title: "身份",
      //     dataIndex: "role",
      //     key: "role",
      //     render: (v, item, index) => {
      //       return (
      //         <Tag
      //           color={roleList.find((val) => val.value == item.role).color}
      //           style={{ margin: "0 10px" }}
      //         >
      //           {roleList.find((item) => item.value == v).text}
      //         </Tag>
      //       );
      //     },
      //     align: "center",
      //   },
      {
        title: "时间",
        dataIndex: "time",
        key: "time",
        render: (v, item, index) => {
          return moment(v).format("YYYY-MM-DD hh:mm:ss");
        },
        align: "center",
      },
      {
        title: "分类",
        dataIndex: "code",
        key: "code",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "收藏数量",
        dataIndex: "collect",
        key: "collect",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "点赞数量",
        dataIndex: "star",
        key: "star",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "热度",
        dataIndex: "heat",
        key: "heat",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "操作",
        render: (v, item, index) => {
          return (
            <div>
              <Button
                onClick={() => this.showUpdateModal(item)}
                style={{ marginRight: 10 }}
                type="primary"
                size="small"
              >
                增加热度
              </Button>
              <Modal
                title="增加热度"
                visible={this.state.isModalVisible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
              >
                <Form>
                  <Form.Item
                    label="增加的热度值"
                    name="name"
                    rules={[{ required: true, message: "请输入增加的热度值" }]}
                  >
                    <InputNumber
                      min={0}
                      onChange={(value) => this.onChange(value)}
                    />
                  </Form.Item>
                </Form>
              </Modal>

              <Button
                type="danger"
                size="small"
                onClick={() => {
                  this.showDownModel(item);
                }}
              >
                降低热度
              </Button>
              <Modal
                title="降低热度"
                visible={this.state.dowmModalVisible}
                onOk={this.downhandleOk}
                onCancel={this.downhandleCancel}
              >
                <Form>
                  <Form.Item
                    label="减少热度值"
                    name="name"
                    rules={[{ required: true, message: "请输入减少的热度值" }]}
                  >
                    <InputNumber
                      min={0}
                      onChange={(value) => this.onChangeheat(value)}
                    />
                  </Form.Item>
                </Form>
              </Modal>
            </div>
          );
        },
        align: "center",
      },
    ],
    heat: 0,
  };
  onChange = (value) => {
    this.setState({
      heat: this.state.item.heat + value * 1,
    });
  };
  onChangeheat = (value) => {
    // console.log(value);
    this.setState({
      heat: this.state.item.heat - value * 1,
    });
  };
  handleOk = () => {
    http.updateExperience({
      _id: this.state.item._id,
      heat: this.state.heat,
    });
    this.setState({
      isModalVisible: false,
    });
    http.experiencelist().then((res) => {
      var explist = res.data.val.filter((item, i) => {
        return item.status !== 0;
      });
      this.setState({
        explist: explist,
      });
    });
  };
  downhandleOk = () => {
    http.updateExperience({
      _id: this.state.item._id,
      heat: this.state.heat,
    });
    this.setState({
      dowmModalVisible: false,
    });
    http.experiencelist().then((res) => {
      var explist = res.data.val.filter((item, i) => {
        return item.status !== 0;
      });
      this.setState({
        explist: explist,
      });
    });
  };
  handleCancel = () => {
    this.setState({
      isModalVisible: false,
    });
  };
  downhandleCancel = () => {
    this.setState({
      dowmModalVisible: false,
    });
  };
  showUpdateModal = (item) => {
    this.setState({
      isModalVisible: true,
      item: item,
    });
  };
  showDownModel = (item) => {
    this.setState({
      dowmModalVisible: true,
      item: item,
    });
  };
  componentDidMount() {
    http.experiencelist().then((res) => {
      if (res.data.code == 200) {
        var explist = res.data.val.filter((item, i) => {
          return item.status !== 0;
        });
        explist.forEach((item, index) => {
          http.getuserinfo({ phone: item.phone }).then((res) => {
            explist[index].avatar = res.data.val[0].avatar;
            explist[index].role = res.data.val[0].role;
            explist[index].username = res.data.val[0].username;
          });
        });
        setTimeout(() => {
          this.setState({
            explist: explist,
          });
        }, 500);
      }
    });
  }
  render() {
    const { columns, explist } = this.state;
    return (
      <div>
        <h2>热度管理面板</h2>
        {explist && (
          <Table
            columns={columns}
            dataSource={explist}
            style={{ marginTop: 10, width: "100%" }}
            bordered
            size="small"
            id="mytable"
            rowKey={(item) => item._id}
            pagination={{ pageSize: 10 }}
          />
        )}
      </div>
    );
  }
}
